<template>
    <div class="box">
        <div class="title">{{$t('clrrec')}} | {{$t('detls')}}</div>
        <el-button type="primary" icon="el-icon-d-arrow-left" :circle="true" @click="goAway" v-preventReClick></el-button>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('liqsernum')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.settleSerialNo}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('clrgsta')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.settleFlag}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('systrknum')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.globalSeq}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('chnmerno')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.channelNo}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('chnnumber')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.channelCode}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('chnordnum')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.channelOrderNo}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paysernum')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.paySerialNo}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('orgpaysernum')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.orgiPaySerialNo}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payordno')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payOrderNo}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('mertodrnum')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.merOrderNo}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('trstyp')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.transType}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('trastamt')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payAmt}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payeetpe')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payeeUserType}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payeid')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payeeUserId}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payertyp')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payerUserType}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('expsionpar')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.extInfo}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payprod')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.productCode}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paytyp')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payType}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('amountofacc')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.amt}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payamtextinfo')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payAmt}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('servchrg')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.fee}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paystas')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payStatus}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('finadate')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.accountDate}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('duedat')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.shouldSettleDate}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('creationme')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.gmtCreate}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('modtim')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.sysGmtModified}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paytime')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payTime}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('chntime')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.channelSettleDate}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('odrnoteimgadd')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody dadada">{{detForm.payOrderDescPicAdd}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('odrdesc')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody dadada">{{detForm.payOrderDesc}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('protinfo')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody dadada">{{detForm.goodsInfo}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {
    recret
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            settleSerialNo: '',
            detForm: {}
        }
    },
    methods: {
        getRecRet () {
            recret(JSON.stringify({ settleSerialNo: this.settleSerialNo })).then(res => {
                if (res.data.code !== '000000') {
                    this.$message.error(res.data.msg)
                }
                if (res.data.data.settleFlag === 0) res.data.data.settleFlag = this.$t('notyetcld')
                if (res.data.data.settleFlag === 1) res.data.data.settleFlag = this.$t('clrunset')
                if (res.data.data.settleFlag === 2) res.data.data.settleFlag = this.$t('settled')
                if (res.data.data.settleFlag === 9) res.data.data.settleFlag = this.$t('nosetreq')
                if (res.data.data.transType === 'RECHARGE') res.data.data.transType = this.$t('recharge')
                if (res.data.data.transType === 'CONSUME') res.data.data.transType = this.$t('consumption')
                if (res.data.data.transType === 'WITHDRAW') res.data.data.transType = this.$t('cashwiaw')
                if (res.data.data.transType === 'REFUND') res.data.data.transType = this.$t('refund')
                if (res.data.data.transType === 'TRANSFER') res.data.data.transType = this.$t('tranacc')
                if (res.data.data.transType === 'REPAYMENT') res.data.data.transType = this.$t('repayment')
                if (res.data.data.payerUserType === 'PSN') res.data.data.payerUserType = this.$t('personal')
                if (res.data.data.payerUserType === 'MER') res.data.data.payerUserType = this.$t('merchant')
                if (res.data.data.payeeUserType === 'PSN') res.data.data.payeeUserType = this.$t('personal')
                if (res.data.data.payeeUserType === 'MER') res.data.data.payeeUserType = this.$t('merchant')
                if (res.data.data.productCode === 'SCAN_PAY_CODE') res.data.data.productCode = this.$t('paymentbypaymentcode')
                if (res.data.data.productCode === 'SCAN_REC_CODE') res.data.data.productCode = this.$t('paybycollectioncode')
                if (res.data.data.productCode === 'SDK_CONSUME') res.data.data.productCode = this.$t('sdkconsump')
                if (res.data.data.productCode === 'PLAT_CONSUME') res.data.data.productCode = this.$t('platformcon')
                if (res.data.data.productCode === 'SETTLE_PAY') res.data.data.productCode = this.$t('settmoney')
                if (res.data.data.payStatus === 'SUCCESS') res.data.data.payStatus = this.$t('succ')
                if (res.data.data.payStatus === 'FROZEN') res.data.data.payStatus = this.$t('frze')
                if (res.data.data.payType === 'WHP') res.data.data.payType = this.$t('withhold')
                if (res.data.data.payType === 'BQP') res.data.data.payType = this.$t('shortcut')
                if (res.data.data.payType === 'AGTP') res.data.data.payType = this.$t('undertakesto')
                if (res.data.data.payType === 'GWP') res.data.data.payType = this.$t('gateway')
                if (res.data.data.payType === 'SIGN') res.data.data.payType = this.$t('tiedcard')
                res.data.data.accountDate = res.data.data.accountDate.slice(0, 4) + '-' + res.data.data.accountDate.slice(4, 6) + '-' + res.data.data.accountDate.slice(6, 8)
                if (res.data.data.shouldSettleDate) res.data.data.shouldSettleDate = res.data.data.shouldSettleDate.slice(0, 4) + '-' + res.data.data.shouldSettleDate.slice(4, 6) + '-' + res.data.data.shouldSettleDate.slice(6, 8)
                res.data.data.channelSettleDate = res.data.data.channelSettleDate.slice(0, 4) + '-' + res.data.data.channelSettleDate.slice(4, 6) + '-' + res.data.data.channelSettleDate.slice(6, 8)
                this.detForm = res.data.data
            })
        },
        goAway () {
            this.$router.go(-1)
        }
    },
    mounted () {
        this.settleSerialNo = window.sessionStorage.getItem('handlePayNo')
        this.getRecRet()
    },
    destroyed () {
        window.sessionStorage.removeItem('handlePayNo')
    }
}
</script>

<style lang="less" scoped>
.box {
    position: relative;
    width: 800px;
    margin: 0 auto;
    .title {
        display: inline-block;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 700;
    }
    .el-row {
        border-bottom: 1px solid #ccc;
    }
    .el-row:last-child {
        border-bottom: none;
    }
    .detBox {
        margin-top: 26px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        .bhead {
            background: #E4E4E4;
            width: 133px;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .bbody {
            background: #fff;
            width: 267px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .dadada {
            width: 665px;
        }
    }
    .el-button {
        position: absolute;
        top: 20px;
        right: 0;
    }
}
</style>
